<!-- src/views/outbound/weighing/index.vue -->
<script setup>
import { onMounted, ref } from 'vue'
import { getAllApi,updateByIdApi } from '@/api/outbound/outboundorderweights'
import display from './display.vue' // 引入display组件
import Weighting from '@/views/outbound/weighing/weighting.vue'
import { ElMessage } from 'element-plus'

const tableData = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)
const form = ref({
  invoiceCode: '',
  status: 6,
  customerId: ''
})

// display组件引用
const displayRef = ref(null)
const WeightingRef = ref(null)
// 选中的明细列表
const selectedDetailsList = ref([])

// 状态映射
const statusMap = {
  1: '预发货',
  2: '确认发货',
  3: '拣货中',
  4: '拣货完成',
  5: '待打包',
  6: '待称重',
  7: '待发货',
  8: '已发货',
  9: '已签收'
}

// 获取数据
const getAll = async () => {
  const res = await getAllApi(
    form.value.invoiceCode,
    form.value.customerId,
    form.value.status,
    currentPage.value,
    pageSize.value
  )
  total.value = res.total
  tableData.value = res.rows
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  getAll()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getAll()
}

const search = () => {
  currentPage.value = 1
  getAll()
}

// 查看详情
const handleViewDetails = async (row) => {
  try {
    // 添加状态映射到行数据
    const detailRow = {
      ...row,
      status: statusMap[row.status] || '未知'
    };

    selectedDetailsList.value = [detailRow]
    displayRef.value.open()
  } catch (error) {
    console.error('查看详情失败:', error)
    ElMessage.error('查看详情失败!')
  }
}
// 称重操作
const handleAdd = () => {
  if (!selectedDetailsList.value.length) {
    ElMessage.warning('请先选择一条记录')
    return
  }
  WeightingRef.value.open()
}
const submitWeigh = async (data) => {
  try {
    // 添加检查确保有选中项
    if (!selectedDetailsList.value || selectedDetailsList.value.length === 0) {
      ElMessage.error('没有选中的记录')
      return
    }
    
    const res = await updateByIdApi(selectedDetailsList.value[0].id)
    if (res.code === 1) {
      ElMessage.success('称重成功')
      getAll()
    } else {
      ElMessage.error(res.msg || '称重失败')
    }
  } catch (error) {
    console.error('称重操作失败:', error)
    ElMessage.error('操作失败，请重试')
  }
}
const ids = ref([])
const handleSelectionChange = (selection) => {
  // 清空之前的选择
  selectedDetailsList.value.splice(0, selectedDetailsList.length);
  selectedDetailsList.value.push(...selection);
};
onMounted(() => {
  getAll()
})
</script>

<template>
  <!-- 添加display组件 -->
  <display ref="displayRef" :items="selectedDetailsList" />
  <Weighting ref="WeightingRef" :row="selectedDetailsList[0]" @submit="submitWeigh"
    @close="WeightingRef.value.close()" />
  <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
    <el-button @click="handleAdd" type="primary">称重</el-button>
  </div>

  <el-form :model="form" :inline="true" style="margin-bottom: 20px;">
    <el-form-item label="发货单号">
      <el-input v-model="form.invoiceCode" placeholder="请输入发货单号" />
    </el-form-item>
    <el-form-item label="客户名称">
      <el-input v-model="form.customerId" placeholder="请输入客户姓名" />
    </el-form-item>
    <el-form-item label="商品名称">
      <el-input v-model="form.skuId" placeholder="请输入商品ID" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="status" label="状态">
      <template #default="{ row }">
        {{ statusMap[row.status] || '未知' }}
      </template>
    </el-table-column>
    <el-table-column prop="weighingCode" label="称重单号" />
    <el-table-column prop="invoiceCode" label="发货单号" />
    <el-table-column prop="commodityCode" label="商品编码" />
    <el-table-column prop="description" label="商品描述" />
    <el-table-column prop="title" label="商品名称" />
    <el-table-column prop="specCode" label="规格编码" />
    <el-table-column prop="barcode" label="条码" />
    <el-table-column prop="orderQuantity" label="订单数量" />
    <el-table-column prop="weight" label="重量" />
    <el-table-column prop="volume" label="体积" />
    <el-table-column prop="packerName" label="打包员" />
    <el-table-column prop="packingSerialNo" label="打包流水号" />
    <el-table-column prop="weigherName" label="称重员" />
    <el-table-column prop="weighedWeight" label="称重重量" />
    <el-table-column prop="customerName" label="客户名称" />
    <el-table-column prop="checkerName" label="拣货复核员" />
    <el-table-column prop="createBy" label="创建人" />
    <el-table-column fixed="right" label="操作" width="200">
      <template #default="{ row }">
        <el-button size="small" @click="handleViewDetails(row)">查看</el-button>
        <el-button size="small" type="danger" @click="delById(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>